<template>
  <div class="swiper-container">Swiper Content
    <div class="swiper-wrapper">
      <div 
        v-for="(color, index) in colors"
        :key="index"
        class="swiper-slide"
        :style="{ backgroundColor: color }"
      ></div>
    </div>
    <!-- 分页器 -->
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'

export default {
  data() {
    return {
      colors: [
        '#FF6B6B', // 珊瑚红
        '#4ECDC4', // 蒂芙尼蓝
        '#45B7D1', // 天空蓝
        '#96CEB4'  // 薄荷绿
      ]
    }
  },
  mounted() {
    new Swiper('.swiper-container', {
      loop: true,
      pagination: '.swiper-pagination',
      paginationClickable: true,
      autoplay: 2500,
      effect: 'fade', // 渐变切换效果
      speed: 1000     // 切换速度（毫秒）
    })
  }
}
</script>

<style scoped>
.swiper-container {
  width: 100%;
  height: 300px;
}

.swiper-slide {
  width: 100%;
  height: 100%;
}

/* 自定义分页器样式 */
.swiper-pagination-bullet {
  background: white;
  opacity: 0.8;
}
.swiper-pagination-bullet-active {
  background: #fff;
  opacity: 1;
}
</style>
